<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="page">
        <div class="content main">
            <div class="refer">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li class="exist-li">3</li>
                    <!-- <li>4</li> -->

                </ul>
            </div>
        </div>
    </div>
    <div id="page1">
        <div class="content1 main1">
            <div class="refer1">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    ...
                </ul>
            </div>
        </div>
    </div>
    <script>
        let ul = document.querySelector('ul')
        let li = document.querySelector('.exist-li')
        console.log(li.nextElementSibling)
        let newLi = document.createElement('li')
        newLi.innerText = 'nweli'

        Object.prototype.insertAfter = function (newNode, existNode) {
            //existNode.nextElementSibling找不到下一个兄弟就是null
            this.insertBefore(newNode, existNode.nextElementSibling)
            // existNode && existNode.nextElementSibling ? this.insertBefore(newNode, existNode.nextElementSibling) : this.appendChild(newNode)
        }
        ul.insertAfter(newLi, li)
        // li.appendChild
    </script>
</body>

</html>